<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}
			.olympic {
				border: 1px solid red;
				width: 800px;
				min-width: 800px;
				height: 370px;
				min-height: 370px;
				background-image: 
				radial-gradient(circle,transparent 58%,#0081c8 58%,#0081c8 70%,transparent 70%),
				radial-gradient(circle,transparent 58%,#000 58%,#000 70%,transparent 70%),
				radial-gradient(circle,transparent 58%,#ee334e 58%,#ee334e 70%,transparent 70%),
				radial-gradient(circle,transparent 58%,#fcb131 58%,#fcb131 70%,transparent 70%),
				radial-gradient(circle,transparent 58%,#00a651 58%,#00a651 70%,transparent 70%);
				background-position: 
				0% 0%,
				center 0%,
				right 0%,
				25% 100%,
				75% 100%;
				background-repeat: no-repeat;
				background-size: 250px 250px;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="olympic"></div>
	</body>
</html>
